<template>
  <ElRow class="novel-item">
    <ElCol :span="4">
      <el-image @click="LinkToBook()"
        :src="novel.coverImageUrl || 'http://bookcover.yuewen.com/qdbimg/349573/1036370336/600.webp'" loading="lazy"
        fit="cover" class="novel-cover" :preview-src-list="[novel.coverImageUrl]" />
    </ElCol>
    <ElCol :span="20" class="novel-details">
      <h3 class="novel-title" @click="LinkToBook">{{ novel.title }}</h3>
      <p class="novel-summary">{{ novel.summary }}</p>

      <div class="novel-meta">
        <ElTag>{{ formatWordCount(novel.wordCount) }}</ElTag>
        <ElTag>{{ isEnd(novel.status) }}</ElTag>
        <ElTag>{{ novel.likes }} 推荐票</ElTag>
        <ElRate :model-value="novel.rating" disabled show-score />
        <span>{{ novel.rating }} / 5</span>
      </div>

      <p class="novel-updated">
        最近更新: {{ timeAgo(novel.lastUpdateDate) }}
      </p>
    </ElCol>
  </ElRow>
</template>


<script setup lang="ts">
import { ElMessage } from 'element-plus';
import router from '../../../router';
import { timeAgo } from '@/utils/util';

// 直接使用 defineProps，无需导入
const props = defineProps({
  novel: {
    type: Object,
    required: true,
  },
});

// 格式化字数，添加单位
const formatWordCount = (wordCount: number) => {
  if (wordCount >= 10000) {
    return (wordCount / 10000).toFixed(1) + ' 万字';
  }
  return wordCount + ' 字';
};

// 判断是否完结
const isEnd = (status: number) => {
  return status === 2 ? '已完结' : '连载中';
};

// 跳转到书籍详情页面
const LinkToBook = () => {
  router.push({ path: '/book_show/' + props.novel.id });
};
</script>

<style scoped>
.novel-item {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
}

.novel-cover {
  width: 100px;
  height: 150px;
  cursor: pointer;
}

.novel-details {
  padding-left: 15px;
}

.novel-title {
  font-size: 20px;
  color: var(--bTextColor);
  margin-bottom: 5px;
  cursor: pointer;
  font-weight: bold;
}

.novel-summary {
  font-size: 14px;
  color:  var(--bTextColor);
  margin-bottom: 10px;
}

.novel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.novel-updated {
  font-size: 12px;
  color: var(--bTextColor);
  margin-top: 10px;
}
</style>
